import React from 'react';
import Axios from 'axios';
import Input from 'shared/input';
import { apiPrefix } from 'shared/api';
import { Select } from 'antd';
import QueryButton from '../QueryButton';

import './index.less';

const { Option } = Select;

class UserInput extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      projects: [],
      user: {},
      queryMessage: {
      },
    };
  }
  componentDidMount() {
    const api = `${apiPrefix}api/v1/unirole/projects`;
    Axios.get(api)
      .then((response) => {
        this.setState({ projects: response.data.data });
      });
  }
  handleOnchange=(value, key) => {
    this.props.onChange(value, key);
  }
  query=() => {
    console.log('user999');
  }
  render() {
    const { projects } = this.state;
    const { queryMessage } = this.props;
    return (
      <section className="user-input">
        <Input
          value={queryMessage.user.name || ''}
          inputKey="name"
          label="姓名"
          onChange={(val, key) => this.handleOnchange(val, key)}
        />
        <Input
          value={queryMessage.user.erp_id || ''}
          inputKey="erp_id"
          label="员工编号"
          onChange={(val, key) => this.handleOnchange(val, key)}
        />
        <div>
          <span>请选择性别</span>
          <Select
            style={{ width: 200, marginLeft: 20 }}
            showSearch
            value={queryMessage.user.sex || ''}
            placeholder="性别查询"
            onChange={value => this.handleOnchange(value, 'sex')}
            optionFilterProp="children"
            filterOption={(input, option) =>
              option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
              }
          >
            <Option value="男">男</Option>
            <Option value="女">女</Option>
          </Select>
        </div>
        <Input
          inputKey="idcard"
          label="身份证号码"
          value={queryMessage.user.idcard || ''}
          onChange={(val, key) => this.handleOnchange(val, key)}
        />
        <div>
          <span>所在项目</span>
          <Select
            style={{ width: 200, marginLeft: 20 }}
            showSearch
            placeholder="请选择项目部"
            value={queryMessage.project_id || ''}
            onChange={value => this.handleOnchange(value, 'project_id')}
            optionFilterProp="children"
            filterOption={(input, option) =>
              option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
              }
          >
            {
              projects.map((value, index) => (
                <Option value={value.id} key={index}>{value.name}</Option>
                ))
            }
          </Select>
        </div>
        <div>
          <QueryButton
            query={this.query}
          />
        </div>
      </section>
    );
  }
}

export default UserInput;
